<template>
  <div class="login-container">
    <div class="login-section">
      <h2 class="login-title">登录</h2>
      <div class="login-methods">
        <div
          :class="{ 'active-login': isPasswordLogin }"
          @click="toggleLogin('password')"
          class="login-method password-login"
        >
          账号密码登录
        </div>
        <div
          :class="{ 'active-login': isSmsLogin }"
          @click="toggleLogin('sms')"
          class="login-method sms-login"
        >
          短信登录
        </div>
      </div>
      <div v-if="isPasswordLogin" class="password-login-form">
        <label for="username">账号名/邮箱/手机号</label>
        <input type="text" id="username" v-model="username" />
        <label for="password">请输入登录密码</label>
        <input type="password" id="password" v-model="password" />
        <button type="button" class="login-button" @click="handleLogin">登录</button>
        <a href="#" class="forgot-password">忘记密码</a>
        <a href="#" class="register-link">免费注册</a>
      </div>
      <div v-if="isSmsLogin" class="sms-login-form">
        <label for="phone">+86 中国大陆</label>
        <input type="text" id="phone" v-model="phone" />
        <label for="verification-code">请输入验证码</label>
        <input type="text" id="verification-code" v-model="verificationCode" />
        <button type="button" class="get-verification-code" @click="getVerificationCode">获取验证码</button>
        <button type="button" class="login-button" @click="handleLogin">登录</button>
      </div>
    </div>
    <div class="separator"></div>
    <div class="qr-login-section">
      <h2 class="login-title">扫码登录</h2>
      <img src="https://picsum.photos/200/200" alt="二维码" class="qr-code-image" />
      <p class="qr-login-text">使用 1688 / 淘宝App 扫码登录</p>
      <a href="#" class="register-link">免费注册</a>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const isPasswordLogin = ref(true);
    const isSmsLogin = ref(false);
    const username = ref('tjy');
    const password = ref('111111');
    const phone = ref('');
    const verificationCode = ref('');
    const countdown = ref(0);

    const toggleLogin = (type) => {
      isPasswordLogin.value = type === 'password';
      isSmsLogin.value = type ==='sms';
    };

    const getVerificationCode = () => {
      if (!phone.value) {
        alert('请输入手机号');
        return;
      }
      // 模拟获取验证码逻辑，此处添加倒计时功能
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(timer);
        }
      }, 1000);
      // 实际项目中应调用API发送验证码
      console.log(`向 ${phone.value} 发送验证码`);
    };

    const handleLogin = () => {
      if (isPasswordLogin.value) {
        if (username.value === 'tjy' && password.value === '111111') {
          router.push('/shopping');
        } else {
          alert('账号或密码错误');
        }
      } else if (isSmsLogin.value) {
        if (phone.value && verificationCode.value) {
          router.push('/shopping');
        } else {
          alert('请输入手机号和验证码');
          return;
        }
      }
    };

    return {
      isPasswordLogin,
      isSmsLogin,
      username,
      password,
      phone,
      verificationCode,
      countdown,
      toggleLogin,
      getVerificationCode,
      handleLogin
    };
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
}

.login-section {
  width: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 10px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.login-methods {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.login-method {
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: #666;
  font-weight: normal;
}

.active-login {
  color: #000;
  font-weight: bold;
  transform: scale(1.2);
}

.password-login-form label,
.sms-login-form label {
  display: block;
  margin-bottom: 5px;
}

.password-login-form input,
.sms-login-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.forgot-password,
.register-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #007bff;
  text-decoration: underline;
}

.separator {
  width: 1px;
  height: 80%;
  background-color: #ccc;
  margin: 0 20px;
}

.qr-login-section {
  width: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.qr-login-text {
  margin-bottom: 10px;
}

.get-verification-code {
  position: relative;
  right: 0;
  top: 0;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.get-verification-code:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>